<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <title>物品记录管理</title>
    <link rel="icon" href="../fffff.ico">
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/my.css"/>
</head>
<style>
    .big {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 133px;
    }
    .small {
        height: 100px;
        width: 100px;
        position: relative;
        left: 100px;
        top: 100px;
        margin-top: -50px;
        margin-left: -50px;
    }
</style>
<body>
<div class="big">

    <!--    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>-->

    <div class="layui-upload-drag small" id="test10" style="float: left">
        <i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处(请上传2:1尺寸的图片)</p>
        <div class="layui-hide" id="uploadDemoView">

            <img src="" alt="上传成功后渲染" style="max-width: 200px;margin-left: -47px;margin-top: 10px">
        </div>
    </div>
</div>

</body>
<script src="../layui/layui.all.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="../js/up.js"></script>
<script>
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;
//执行实例
//         var uploadInst = upload.render({
//             elem: '#test1' //绑定元素
//             , url: '/pic/upload?goodId=' + getUrlParam("goodId") //上传接口
//             , done: function (res) {
//                 //上传完毕回调
//             }
//             , error: function () {
//                 //请求异常回调
//             }
//         });

        upload.render({
            elem: '#test10'
            , url: '/pic/upload?goodId=' + getUrlParam("goodId") //改成您自己的上传接口
            , done: function (res) {
                layer.msg('上传成功');
                layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.data.src);
                console.log(res)
            }
            ,exts: "jpg|png|gif|bmp|jpeg"
            ,size: 5000
        });
        //普通图片上传
        //设定文件大小限制
        // upload.render({
        //     elem: '#test7'
        //     , url: '/pic/upload?goodId=' + getUrlParam("goodId") //改成您自己的上传接口
        //     , size: 60 //限制文件大小，单位 KB
        //     , done: function (res) {
        //         layer.msg('上传成功');
        //         console.log(res)
        //     }
        // });
    });
</script>
</html>